<template>
  <div class="tableDesign d-flex">
    <div class="left">
      <div
        class="leftTree mapping d-flex flex-column"
        :style="{'height':screenHeight+'px'}"
        :class="[isActive ? 'width200' : 'width0']"
        @scroll="dropDownScrollFun"
      >
        <div class="title itemTop">
          {{ title }}
        </div>
        <el-tree
          ref="tree"
          :data="dataTree"
          :props="defaultProps"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          :empty-text="emptyText"
          :accordion="false"
          node-key="key"
          :default-expand-all="true"
          :indent="10"
          :highlight-current="true"
          @node-drag-start="handleDragStart"
        >
          <div slot-scope="{ node,data }" class="custom-tree-node" style="display: flex;">
            <span :class="{'firstNode':data[firstNode]}">{{ node.label }}</span>
            <div v-if="data.children" style="width:50%;">
              <slot name="parent-icon" :parentData="{belong:data.titleName}" />
            </div>
            <div v-if="!data.children" style="width: 50%;">
              <slot name="children-icon" :childrenData="{belong:node.parent.label,data:data}" />
            </div>
          </div>
        </el-tree>
      </div>
      <div class="hamburger" @click="toggleClick">
        <i class="el-icon-arrow-right" :class="{'rotate': isActive}" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTree',
  props: {
    // 标题
    title: {
      type: String,
      default: '项目元素'
    },
    /**
     * 树的数据列表
     * 一级标题为titleName
     * 二级标题为label
     * [{
     *  titlename:'',
     *  children:[{
     *    label:''
     *  }]
     * }]
     */
    dataTree: {
      type: Array,
      default() {
        return []
      }
    },
    // 以什么字段区分是否为一级
    firstNode: {
      type: String,
      default() {
        return 'firstNode'
      }
    },
    // 除去标题的高度
    screenHeight: {
      type: Number,
      default: 700
    },
    defaultProps: {
      type: Object,
      default() {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    /**
     * 假如后台传的数据没有叫label的，是否对数据进行label的添加
     */
    defaultLabel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyText: '暂无数据',
      isActive: true
    }
  },
  // watch: {
  //   dataTree: {
  //     handler() {
  //       if (this.dataTree) {
  //         this.$nextTick(() => {
  //           for (let i = 0; i < this.$refs.tree.$children.length; i++) {
  //             this.$refs.tree.$children[i].$el.firstChild.style.fontWeight = 'bold'
  //             this.$refs.tree.$children[i].$el.firstChild.firstChild.style.color = '#000000'
  //           }
  //         })
  //       }
  //     }
  //   }
  // },
  mounted() {

  },
  methods: {
    // 下拉框滚动条监听
    dropDownScrollFun(val) {
      // 获取下拉框对象
      const scroll = document.querySelector('.leftTree')
      /**
       * 处理div内部滚动条滚动到底部后导致 再次滚动时触发外部的滚动条
       * 处理方法为：
       * 当前内部滚动条滚动到距离底部小于等于2px时,将其滚动条位置 重置为距离底部2px
       * scrollTop: 可视区域顶部与滚动条顶部的距离
       * scrollHeight: 整个滚动条的高度
       * clientHeight: 可视区域的高度
        */
      // 当前滚动条距离底部还剩2px时
      if (scroll.scrollHeight - (scroll.scrollTop + scroll.clientHeight) <= 2) {
        // 定位到距离底部2px的位置
        scroll.scrollTop = (scroll.scrollHeight - scroll.clientHeight - 2)
      }
    },
    /**
     * 节点被点击时的回调
     */
    handleNodeClick(node, data) {
    },
    /**
     * 收缩展开左侧树
     */
    toggleClick() {
      this.isActive = !this.isActive
    },

    /**
     * 将需要传递的数据写进了事件对象的dataTransfer里
     * @param {Object} node
     * @param {Object} ev
     */
    handleDragStart(node, ev) {
      if (this.defaultLabel) {
        node.data.label = node.data.titleName ? node.data.titleName : node.data.label
      }
      ev.dataTransfer.setData('dragData', JSON.stringify(node.data))
      /**
    	 * dragover获取不到dataTransfer中的值(https://blog.csdn.net/azureternite/article/details/51415359)
    	 * 通过组件传值的方式再建一个变量用于dragover中的使用
    	 */
      this.dataTransferData = node.data
      this.$EventBus.$emit('dataTransferData', this.dataTransferData)
    },
    /**
     * 屏蔽树自身的drop行为
     * @param {Object} draggingNode
     * @param {Object} dropNode
     * @param {Object} type
     */
    allowDrop(draggingNode, dropNode, type) {
      return false
    },
    /**
     * 使节点可拖拽
     * @param {Object} draggingNode
     */
    allowDrag(draggingNode) {
      return !draggingNode.childNodes.length
    }
  }
}
</script>

<style lang="scss" scoped>
  .itemTop{
    position: sticky;
    top: 0;
    z-index: 999;
    background: #F5F6F7;
  }
  .leftTree{
    overflow-y:auto;
    &::-webkit-scrollbar {
      width:4px
    }
    &::-webkit-scrollbar-thumb {
      background:transparent;
      border-radius:4px
    }
    &:hover::-webkit-scrollbar-thumb {
      background:hsla(0,0%,53%,.4)
    }
    &:hover::-webkit-scrollbar-track {
      background:hsla(0,0%,53%,.1)
    }
  }
  .firstNode{
    font-weight: bold;
    color: #000000;
  }
  ::v-deep .el-tree-node__expand-icon:not(.is-leaf ) + div{
    font-weight: bold;
    color: #000000;
  }
  ::v-deep.el-tree-node__expand-icon:not(.is-leaf ){
    font-weight: bold;
    color: #000000;
  }
  ::v-deep.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color:#F5F6F7
  }
  ::v-deep.el-tree{
    background: #F5F6F7;
    border-radius: 5px;
    min-height: 450px;
  }
  ::v-deep.el-tree-node__content{
    // padding-left: 0 !important;
    padding: 18px 0 18px 0 !important;
  }
  .tableDesign{
  	.left{
  		position: relative;
  		margin: 0 30px 5px 10px;
  		//min-height: 400px;
  		::v-deep.el-tree__empty-text{
  			white-space: nowrap;
  		}
  		::v-deep.mapping{
  			transition: .5s;
        background-color: #F5F6F7;
  			// border: 1px solid #DBDBDB;
  			// position: relative;
  			// transform: rotate(360deg);
  			.title {
  				width: 100%;
  				height: 40px;
  				line-height: 40px;
          color: #1989FA;
          border-bottom: 1px solid #d9d8d8;
  				font-size: 16px;
  				padding-left: 15px;
  			}
  		}
  		.width200{
  			width: 200px;
  		}
  		.width0{
  			width: 0px;
  			overflow: hidden;
  		}
  		.hamburger {
  			position: absolute;
  			// left: 0;
  			right: -19px;
  			top: 50%;
  			transform: translateY(-50%);
  			cursor: pointer;
  			display: inline-block;
  			width: 18px;
  			line-height: 36px;
  			height: 36px;
  			background-color: #E4E7ED;
  			color: #fff;
  			border-radius: 0 15px 15px 0;
  			text-align: center;
  			.el-icon-arrow-left{
  				transition: .3s;
  			}
  			&:hover{
  				background-color: #4BABF6;
  			}
  			.rotate{
  				transform: rotate(180deg);
  			}
  		}
  	}
  }
</style>
